<script setup>

// 定义组件属性
const props = defineProps({
  // 日期格式
  format: {
    type: String,
    default: 'YYYY-MM-DD' // 默认格式
  },
  // 对齐方式
  align: {
    type: String,
    default: 'left'
  },
  // 标签是否可见
  labelVisible: {
    type: Boolean,
    default: true
  },
  // 是否必填
  required: {
    type: Boolean,
    default: false
  },
  // 标签文本
  label: {
    type: String,
    default: ''
  },
  // 标签宽度
  labelWidth: {
    type: String,
    default: ''
  },
  // 占位符
  placeholder: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  },
  // 最小可选日期
  minDate: {
    type: String,
    default: ''
  },
  // 最大可选日期
  maxDate: {
    type: String,
    default: ''
  }
})

// 双向绑定值
const value = defineModel()

// 格式化日期显示
const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 处理日期变化
const handleDateChange = (e) => {
  value.value = e.target.value
}
</script>

<template>
  <div :class="['flex', align === 'top' ? 'flex-col items-stretch' : 'items-center']">
    <!-- 标签部分 -->
    <div v-if="labelVisible" class="text-sm flex items-center mr-1 font-medium">
      <template v-if="$slots.label">
        <span v-if="required" class="text-red-500 mr-0.5">*</span>
        <slot name="label"></slot>
      </template>
      <div v-else :style="{ width: labelWidth, textAlign: align === 'top' ? 'left' : align }">
        <span v-if="required" class="text-red-500 mr-0.5">*</span>
        <span> {{ label }}</span>
      </div>
    </div>

    <!-- 日期选择框 -->
    <input type="date" :name="label" v-model="value" :class="[
      'grow h-[32px] rounded-[2px] border-none pl-[12px] pr-[12px] text-sm bg-[#f7f8fa] font-medium ',
      align !== 'top' ? 'ml-2' : 'mt-1.5',
    ]" :placeholder="placeholder || '请选择' + props.label" :disabled="disabled" :readonly="readonly" :min="minDate"
      :max="maxDate" @change="handleDateChange" />
  </div>
</template>

<style scoped>
input::placeholder {
  color: #757575
}

input:focus {
  outline: none;
}

input:focus-visible {
  outline: none;
}

input[disabled] {
  color: #757575
}

/* 日期选择器特有样式 */
input[type="date"] {

  /* 移除默认箭头按钮 */
  &::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.5);
  }

  /* 禁用状态下的图标样式 */
  &:disabled::-webkit-calendar-picker-indicator {
    cursor: not-allowed;
    filter: invert(0.7);
  }
}
</style>
